<template>
	<div class="uni-footer pc">
		<!-- #ifdef H5 -->
		<view class="inner-top">
			<view class="top">
				<view class="ttl">
					<image src="/static/h5/icon06.png" mode="scaleToFill"></image>
					<text>行业平台，领先技术</text>
				</view>
				<view class="ttl">
					<image src="/static/h5/icon07.png" mode="scaleToFill"></image>
					<text>专业团队，用心服务</text>
				</view>
				<view class="ttl">
					<image src="/static/h5/icon08.png" mode="scaleToFill"></image>
					<text>创新模式，极致体验</text>
				</view>
				<view class="ttl">
					<image src="/static/h5/icon05.png" mode="scaleToFill"></image>
					<text>资源丰富，实时更新</text>
				</view>
			</view>
		</view>
		<view class="inner-box">
			<view class="mid">
				<view class="link-box">
					<text class="ttl">新手指南</text>
					<navigator class="txt" url="/pages/cart/cart">登陆/注册</navigator>
					<navigator class="txt" url="/pages/cart/cart">免密登陆</navigator>
					<navigator class="txt" url="/pages/cart/cart">账户管理</navigator>
					<navigator class="txt" url="/pages/cart/cart">企业认证</navigator>
				</view>
				<view class="link-box">
					<text class="ttl">购物指南</text>
					<navigator class="txt" url="/pages/cart/cart">查找商品</navigator>
					<navigator class="txt" url="/pages/cart/cart">如何下单</navigator>
					<navigator class="txt" url="/pages/cart/cart">订单管理</navigator>
					<navigator class="txt" url="/pages/cart/cart">如何支付</navigator>
				</view>
				<view class="link-box">
					<text class="ttl">平台服务</text>
					<navigator class="txt" url="/pages/cart/cart">实施查价</navigator>
					<navigator class="txt" url="/pages/cart/cart">物流查询</navigator>
					<navigator class="txt" url="/pages/cart/cart">付款方式说明</navigator>
					<navigator class="txt" url="/pages/cart/cart">找本地</navigator>
				</view>
				<view class="link-box">
					<text class="ttl">售前/售后</text>
					<navigator class="txt" url="/pages/cart/cart">售前支持</navigator>
					<navigator class="txt" url="/pages/cart/cart">售后支持</navigator>
					<navigator class="txt" url="/pages/cart/cart">退货/换货</navigator>
					<navigator class="txt" url="/pages/cart/cart">退货细则</navigator>
				</view>
			</view>
		</view>
		<!-- #endif -->
	</div>
</template>

<script>
	export default {
		data() {
			return {}
		},
		name: 'uni-footer',
		methods: {}
	};
</script>

<style lang="scss">
	/* #ifdef H5 */
	@media screen and (min-width: 750px) {
		.uni-footer {
			position: relative;
			z-index: 998;

			.inner-top {
				background-color: #717171;
			}

			.top {
				display: flex;
				justify-content: space-between;
				margin: 0 auto;
				padding: 25px 0;
				max-width: $base-width-pc;
				height: 100px;
				color: #fff;
				font-size: 24px;
				line-height: 50px;

				.ttl {
					display: flex;
				}

				image {
					margin-right: 10px;
					width: 50px;
					height: 50px;
				}
			}

			.inner-box {
				background-color: #333;
			}

			.mid {
				display: flex;
				margin: 0 auto;
				padding: 44px 0;
				max-width: $base-width-pc;

				.link-box {
					width: 25%;
					line-height: 30px;
					color: #fff;

					.ttl {
						display: block;
						margin-bottom: 20px;
						font-size: 24px;
					}

					.txt:hover {
						text-decoration: underline;
					}
				}
			}
		}
	}

	/* #endif */
</style>
